<template>
  <div>
    <!-- <van-action-sheet v-model:show="show" :actions="actions" @select="onSelect" /> -->
    <div class="panel-container">
      <van-row type="flex" align="center" justify="space-between" >
        <van-col><b class="L-text L-bold-text">{{itemdata.title}}</b></van-col>
        <van-col style="text-align:right">
        </van-col>
      </van-row>
      <div  class="echart-box L-margin-top-20" ref="chart"></div>
    </div>

  </div>
</template>
<script setup lang="ts">
import * as echarts from "echarts";
import { ref, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const route = useRoute();

const props = defineProps({
  itemdata: {
    type: Object,
    default: {},
  },
});

const chart = ref(null);

onMounted(() => {
  initChart();
});

const show = ref(false);

function initChart() {
  const { itemdata } = props;

  let chartDom = chart.value;

  let myChart = echarts.init(chartDom);

  let options = {
    // title: {
    //   text: alldata.title
    // },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    dataset: {
      source: itemdata.values,
    },
    grid: {
      left: "1%",
      right: "3%",
      top: "3%",
      containLabel: true,
    },
    xAxis: {
      boundaryGap: [0, 0.0001],
    },
    yAxis: {
      type: "category",
      inverse: true,
      /* data:{
              textStyle: {
                color:'#ea7ccc',
                width:10,
                overflow: 'break'
              }
            } */
      // 设置文本过长超出隐藏...表示
      axisLabel: {
        /* show: true, */
        margin: 4,
        fontSize: 12,
        width: 100,
        overflow: "truncate",
        ellipsis: "...",
        /* formatter:function(params){
                  var val="";
                  if(params.length >7){
                      val = params.substr(0,7)+'...';
                      return val;
                  }else{
                      return params;
                  }
              } */
      },
    },
    series: [
      {
        type: "bar",
        encode: {
          // 将 "amount" 列映射到 X 轴。
          x: "amount",
          // 将 "cat" 列映射到 Y 轴。
          y: "cat",
        },
        itemStyle: {
          color: itemdata.color,
        },
        /* label: {
                show: true,
                width: 4,
                overflow: 'break'
              } */
      },
    ],
    /* textStyle: {
            width: 10,
             overflow: 'truncate'
          } */
  };

  myChart.setOption(options);
}

function onSelect(item) {
  show.value = false;
}

function handleClick() {
  show.value = true;
}
</script>
<style  scoped>
.panel-container {
  box-sizing: border-box;
  padding: 10px 5px;
  /* background: #000; */
}

.echart-box {
  width: 100vw;
  height: 250px;
  /* border: 3px solid pink; */
  /* margin: 20px auto; */
}
</style>
